<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<view class="box">
					<uni-forms-item required label="分组" name="group_id">
						<picker @change="bindGroup" :range="group" range-key="group_name">
							<view class="picker-input">
								{{ form.group_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="小区" name="community_id">
						<picker @change="bindCommunity" :range="community" range-key="community_name">
							<view class="picker-input">
								{{ form.community_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="房间号" name="room_no">
						<uni-easyinput type="text" v-model="form.room_no" :clearable="false" placeholder="请输入房间号" />
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
import { isPhone } from '@/utils/validate';
export default {
	data() {
		return {
			id: null,
			form: {},
			rules: {
				room_no: {
					rules: [
						{
							required: true,
							errorMessage: '请填写房间号'
						}
					],
					validateTrigger: 'submit'
				}
			},
			group: [],
			community: []
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.getGroup();
		this.getCommunity();
	},
	onShow() {
		this.getDetail();
	},
	methods: {
		bindGroup(e) {
			this.form.group_id = this.group[e.detail.value].id;
			this.form.group_name = this.group[e.detail.value].group_name;
		},
		bindCommunity(e) {
			this.form.community_id = this.community[e.detail.value].id;
			this.form.community_name = this.community[e.detail.value].community_name;
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				let data = res;
				data.room_id = this.id
				api.roomEdit(data).then((res) => {
					if (res.data.is_success) {
						uni.showToast({
							title: '编辑成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.showToast({
							title: '无信息更改',
							icon: 'none'
						});
					}
				});
			});
		},
		getDetail() {
			api.roomDetail({ room_id: this.id }).then((res) => {
				this.form = res.data.info;
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				this.group = data.data;
			});
		},
		getCommunity() {
			api.communityList({}).then((data) => {
				this.community = data.data;
			});
		}
	}
};
</script>